import Taro, { Component } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import Head from "../../components/head";
import Requirements from "../../components/task/requirements";
import TaskInfoHead from "../../components/task/taskInfoHead";
import { removeCache } from "../../utils/cache";
import { CONTENT_OF_TASK } from "../../service/config";
import { getTaskInfo, getTaskContent } from "../../actions/task";
import { connect } from "@tarojs/redux";

import "./task.less";

@connect(
  ({ appconfig, account }) => ({
    ...appconfig,
    account
  }),
  dispatch => ({
    async getTaskContent(params) {
      dispatch(await getTaskContent(params));
    }
  })
)
class Task extends Component {
  config = {
    navigationBarTitleText: "任务详情"
  };

  state = {
    paymentStatus: [
      {
        name: "口碑结算",
        type: 3,
        active: "kb-active",
        unActive: "kb-unchose",
        color: "status-kb"
      },
      {
        name: "到店结算",
        type: 1,
        active: "dd-active",
        unActive: "dd-unchose",
        color: "status-dd"
      },
      {
        name: "成交结算",
        type: 2,
        active: "cj-active",
        unActive: "cj-unchose",
        color: "status-cj"
      }
    ],
    taskInfo: {}
  };

  async componentWillMount() {
    removeCache(CONTENT_OF_TASK);
    const { id } = this.$router.params;
    const { id: puser } = this.props.account;
    await this.props.getTaskContent({ id, puser });
    getTaskInfo({ id: parseInt(id) }).then(result => {
      if (result.state === "000") {
        this.setState({
          taskInfo: result.data
        });
      }
    });
  }

  render() {
    const { type, id } = this.$router.params;
    const { paymentStatus } = this.state;
    const { id: puser } = this.props.account;
    let paymentState = [];
    paymentStatus.forEach(item => {
      if (item.type === parseInt(type)) {
        const { name, active: img, color } = item;
        paymentState.push({ name, img, color });
      } else {
        const { name, unActive: img } = item;
        paymentState.push({ name, img, color: "status-default" });
      }
    });
    return (
      <View className="task-index">
        <Head title="任务详情" urlPath={'/pages/index/index'} />

        <TaskInfoHead
          staticUri={this.props.staticUri}
          info={this.state.taskInfo}
        />

        <View className="task-warning">
          <View className="warning-con">
            {type > 1 && [
              <View className="warning-info-img">
                <Image
                  style="width:12px;height:12px;"
                  src={require("../../assets/img/red-warning.png")}
                />
              </View>,

              <Text className="warning-info-font">
                {parseInt(type) === 3
                  ? "最终可得佣金 = 有效点击量 X 单个点击佣金"
                  : "成单金额以最终成交价的百分比结算，此处显示的仅为商品市场参考价"}
              </Text>
            ]}
          </View>
        </View>

        <View className="task-requirements">
          <View className="requirements-con">
            <Text className="requirements-title">任务要求</Text>
            <View className="requirements-entry">
              <Requirements des={this.state.taskInfo.des} />
            </View>
          </View>
        </View>
        <View className="task-phone">
          <View className="phone-con">
            <Image
              style="width:21px;height:21px;margin-left:6PX;"
              src={require("../../assets/img/contact-phone.png")}
            />
            <Text style="margin-left:10px;font-size: 14px;color: #333333;">
              电话：{this.props.c_phone}
            </Text>
          </View>
        </View>
        <View className="task-btn">
          <View
            className="forward-again"
            onClick={() => {
              Taro.redirectTo({
                url: "/pages/index/sharecontent?id=" + id + "&puser=" + puser
              });
            }}
          >
            预览分享赚佣金
          </View>
        </View>
      </View>
    );
  }
}
export default Task;
